<template>
    <view :class="{popupShow:isShow}">
        <uni-nav-bar left-icon="left" :statusBar="true" titleSize="30px" leftText="返回" rightText="新建" title="租赁订单"
            @clickLeft="back" @clickRight="addBtn" :fixed="true" backgroundColor="#3286ed" color="#fff" />
        <!-- 搜索框 -->
        <view>
            <u-search v-if="searchShow===true" style="height;40px;background-color: #fff;padding: 10px;"
                @clear="clearFn" :clearabled="true" showAction @custom="customFn" @search="inputSearchBtn"
                v-model.enter="formData.orderNo" height='30' placeholder="请输入订单编码" shape="square" actionText='取消'>
            </u-search>
            <!-- 搜索历史记录 -->
            <view v-if="searchShow===true && historyList.length && close1==true">
                <u-cell title="搜索历史" style="background-color: #fff;margin-top: 3px;">
                    <template #right-icon>
                        <uni-icons type="trash" @click="delFn" size="20"></uni-icons>
                    </template>
                </u-cell>
                <view class="history">
                    <span v-for="(item,index) in historyList" :key="index">
                        <u-tag :text="item" borderColor="#eee" color="#eee" plain size="mini" closable
                            @click="historyBtn(item,index)" :show="close1" @close="closeFn( item,index)"></u-tag>
                    </span>
                </view>
            </view>
            <view v-if="searchShow===true && searchList.length>0" class="box" v-for="(item) in searchList"
                :key="item.id">
                <view class="list-top">
                    <view>{{item.orderNo}}</view>
                    <view style="color: #ff7c35;">{{item.receivedAmount}}元</view>
                </view>
                <view class="list-body">
                    <view>客户名称:<span>{{item.customerName}}</span></view>
                    <view>业务员:<span>{{item.salesmanName}}</span></view>
                    <view>订单发起日期:<span>{{item.orderDate}}</span></view>

                </view>
                <view class="list-bottom">
                    <view style="border-right: solid 1px #c3c3c3;">
                        <navigator :url="'/pages/order/orderdetails/index?id='+item.id" open-type="navigate">
                            详情
                        </navigator>
                    </view>
                    <view @click="openBtn">操作</view>
                </view>
            </view>
        </view>
        <view v-if="searchShow==false">
            <!-- 筛选框 -->
            <view style="position: fixed;z-index: 100;width:100%;">
                <uni-row class="demo-uni-row">
                    <uni-col :span="10">
                        <!-- 筛选组件-->
                        <zb-dropdown-menu style="width: 100%" z-index="12">
                            <zb-dropdown-item v-model="formData.orderType" :options="option" @change="changeFn">
                            </zb-dropdown-item>
                            <!-- <zb-dropdown-item   :options="option2"     v-model="formData.orderStatus" @change="changeStatus"></zb-dropdown-item> -->
                        </zb-dropdown-menu>
                    </uni-col>
                    <uni-col :span="1">
                        <view class="title" style="color:#c3c3c3">|</view>
                    </uni-col>
                    <uni-col :span="6">
                        <view class="title" @click="searchBtn">筛选</view>
                    </uni-col>
                    <uni-col :span="1">
                        <view class="title" style="color:#c3c3c3">|</view>
                    </uni-col>
                    <uni-col :span="6">
                        <view class="title">
                            <uni-icons @click="magnifierBtn" type="search" size="24" color="#c3c3c3"></uni-icons>
                        </view>
                    </uni-col>
                </uni-row>
            </view>
            <view style="width:100%;height: 88rpx;display: block"></view>

            <u-swipe-action :autoClose='true'>
                <view class="box" v-for="(item) in list" :key="item.id">
                    <u-swipe-action-item :disabled="disabledShow" :options="options1" @click="delBtn" :name="item.id">
                        <view @click="detailsBtn(item.id)">
                            <view class="list-top">
                                <view>{{item.orderNo}}</view>
                                <view style="color: #ff7c35;">{{item.receivedAmount}}元</view>
                            </view>
                            <view class="list-body">
                                <view>客户名称:<span>{{item.customerName}}</span></view>
                                <view>业务员:<span>{{item.salesmanName}}</span></view>
                                <view>订单发起日期:<span>{{item.orderDate}}</span></view>
                                <view>订单状态:
								<span style="color: #ff7c35;" v-if="item.orderStatus=='12'">已驳回</span>
								<span style="color: #ff7c35;" v-if="item.orderStatus=='13'">已撤回</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='0'">审批中</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='1'">待发货</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='7'">发货中</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='2'">已出库</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='9'">申请中</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='3'">已申请回货</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='10'">入库中</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='4'">已入库</span>
                                    <span style="color: #ff7c35;" v-if="item.orderStatus=='5'">已对账</span>
                                </view>
                            </view>
                        </view>
                        <view class="list-bottom">
                            <view style="border-right: solid 1px #c3c3c3;">
                                <navigator :url="'/pages/order/orderdetails/index?id='+item.id" open-type="navigate">
                                    详情
                                </navigator>
                            </view>
                            <view @click="openBtn(item)">操作</view>
                        </view>
                    </u-swipe-action-item>
                </view>
            </u-swipe-action>
        </view>
        <view v-if="list.length ==0 " class="BGC"></view>
        <!-- 消息提示 -->
        <u-toast ref="uToast"></u-toast>
        <!-- 操作弹出层 -->
        <u-popup :closeable="true" v-if="openShow==true" :show="openShow" customStyle="margin-top:44px"
            overlayStyle="margin-top:44px" mode="bottom" :closeOnClickOverlay="true" @close="close">
            <view class="openBox">
                <u-cell>
                    <template #title>
                        <view style="font-size: 16px;font-weight: 600;color:#ff7c35;">操作按钮</view>
                    </template>
                    <template #icon>
                        <view style="font-weight: 900;color:#ff7c35;">|</view>
                    </template>
                </u-cell>
                <uni-grid :column="4" :showBorder='false' style="margin-bottom: 50px;">
                    <uni-grid-item>
                        <view class="grid-item-box" @click="outBtn">
                            <uni-icons type="wallet" size="25" class="iconBox" style="font-size: 20px;"></uni-icons>
                            <text class="text">出库单</text>
                        </view>
                    </uni-grid-item>
                    <uni-grid-item>
                        <view class="grid-item-box" @click="returnApply">
                            <uni-icons type="wallet" size="25" class="iconBox" style="font-size: 20px;"></uni-icons>
                            <text class="text">回库申请</text>
                        </view>
                    </uni-grid-item>
                   <!-- <uni-grid-item>
                        <view class="grid-item-box">
                            <uni-icons type="wallet" size="25" class="iconBox" style="font-size: 20px;"></uni-icons>
                            <text class="text">回货入库</text>
                        </view>
                    </uni-grid-item> -->
                    <uni-grid-item>
                        <view class="grid-item-box" @click="statementFn">
                            <uni-icons type="wallet" size="25" class="iconBox" style="font-size: 20px;"></uni-icons>
                            <text class="text">对账单</text>
                        </view>
                    </uni-grid-item>
                    <!-- <uni-grid-item>
                        <view class="grid-item-box" @click="finnalStatement">
                            <uni-icons type="wallet" size="25" class="iconBox" style="font-size: 20px;"></uni-icons>
                            <text class="text">结算单</text>
                        </view>
                    </uni-grid-item>
                    <uni-grid-item>
                        <view class="grid-item-box">
                            <uni-icons type="wallet" size="25" class="iconBox" style="font-size: 20px;"></uni-icons>
                            <text class="text">维修</text>
                        </view>
                    </uni-grid-item> -->
                   <!-- <uni-grid-item>
                        <view class="grid-item-box">
                            <uni-icons type="wallet" size="25" class="iconBox" style="font-size: 20px;"></uni-icons>
                            <text class="text">物流</text>
                        </view>
                    </uni-grid-item> -->
                    <uni-grid-item>
                        <view class="grid-item-box" @click="recallFn">
                            <uni-icons type="undo-filled" size="25" class="iconBox" style="font-size: 20px;color: #38b5ff;"></uni-icons>
                            <text class="text">撤回</text>
                        </view>
                    </uni-grid-item>
					<uni-grid-item>
					    <view class="grid-item-box" @click="resubmit">
					        <uni-icons type="refresh-filled" size="25" class="iconBox" style="font-size: 20px;color: #38b5ff;"></uni-icons>
					        <text class="text">重新提交</text>
					    </view>
					</uni-grid-item>
					
                </uni-grid>
            </view>
            <view class="btn">
                <u-button type="warning" :plain="true" @click="openShow=false" size="small" text="关闭"></u-button>
            </view>
        </u-popup>
        <!-- 右边筛选 -->
        <u-popup :closeable="true" v-if="isShow==true" :show="isShow" customStyle="margin-top:44px"
            overlayStyle="margin-top:44px" mode="right" :closeOnClickOverlay="true" @close="closeBtn">
            <view class="rightBox">
                <u-cell>
                    <template #title>
                        <view style="font-size: 16px;font-weight: 600;color:#ff7c35;">筛选</view>
                    </template>
                    <template #icon>
                        <view style="font-weight: 900;color:#ff7c35;">|</view>
                    </template>
                </u-cell>
                <u-cell title="订单发起日期" @click="pickBtn" name="订单发起日期">
                    <template #value>
                        <view>{{formData.orderDate}}</view>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </template>
                </u-cell>
                <u-cell class="bg" title="业务所属公司" @click="pickBtn" name="业务所属公司">
                    <template #value>
                        <view v-if="businessCompany" style="font-size: 13px;">{{businessCompany}}</view>
                        <view v-else style="color:#c3c3c3">请选择</view>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </template>
                </u-cell>

                <!-- u-cell  title="项目名称"  name="项目名称">
							<template #value>
								<view v-if="formData.projectName">{{formData.projectName}}</view>
								<view v-else style="color:#c3c3c3">请输入</view>	
							</template>
						</u-cell> -->
                <u-cell title="项目地区域" @click="pickBtn" name="项目地区域">
                    <template #value>
                        <view v-if="formData.projectAreaName">{{formData.projectAreaName}}</view>
                        <view v-else style="color:#c3c3c3">请选择</view>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </template>
                </u-cell>
                <view class="itemBox">
                    <view class="title">客户名称：</view>
                    <u--input customStyle="height:30px" placeholder="请输入客户名称" v-model="formData.customerName">
                    </u--input>
                </view>
            </view>

            <view class="btn">
                <uni-row class="demo-uni-row">
                    <uni-col :span="12">
                        <u-button @click="reset" color="#c3c3c3" size="small" text="重置"></u-button>
                    </uni-col>
                    <uni-col :span="12">
                        <u-button type="warning" @click="searchClick" size="small" text="确认"></u-button>
                    </uni-col>
                </uni-row>
            </view>
        </u-popup>

        <!-- 时间选择器 -->
        <u-datetime-picker v-model="dateNow" :show="dateShow" @cancel="dateShow=false" mode="date"
            @confirm="dateConfirm">
        </u-datetime-picker>
        <!-- 所属公司的选择器 -->
        <u-picker :show="businessCompanyShow" :columns="businessCompanyOptions" @confirm="confirm"
            @cancel="businessCompanyShow=false" keyName="dictLabel"></u-picker>
        <u-picker :show="regionShow" @confirm="regionConfirm" @cancel="regionShow=false" :columns="regionOptions"
            keyName="label"></u-picker>

    </view>
</template>

<script>
    import {
        listOrder,
        delOrder,
		updateOrder
    } from '@/api/order/order.js'
    import {
        listHouse
    } from '@/api/out/out.js'
    import {
        getBackWarehouseList
    } from '@/api/backapplication.js'
    import {
        getStatementListApi
    } from '@/api/accountStatement.js'
    import {
        getFinalStatementListApi
    } from '@/api/finnalStatement.js'
    import {
        getDicts
    } from '@/api/dictionary/index.js'
    import {
        provinceNameList
    } from '@/api/region/region.js'
	 import {getapprovalRecodeList,editapprovalRecode} from '@/api/approvaRecode.js'
    export default {
        name: 'Order',
        data() {
            return {
                list: [],
                disabledShow: true, //右滑删除得
                permissions: [], //按钮权限
                openShow: false,
                isShow: false, //右边弹框筛选
                dateShow: false, //控制时间选择器
                businessCompanyShow: false, //所属公司
                regionShow: false,
                searchShow: false, //搜索框控制出现
                close1: false, //控制搜索框历史记录
                options1: [{
                    text: '删除'
                }],
                option: [{
                        text: '全部订单',
                        value: ''
                    },
                    {
                        text: '租赁订单',
                        value: 1
                    },
                    {
                        text: '销售订单',
                        value: 2
                    },
                    {
                        text: '审批中',
                        value: 0
                    },
                    
                    {
                        text: '已结算订单',
                        value: 6
                    },
                ],
               itemData:{},
                formData: {
                    orderType: '',
                    orderDate: '',
                    businessCompany: '',
                    projectName: '',
                    projectAreaName: '',
                    projectArea: '',
                    customerName: '',
                    orderNo: '',
                    pageSize: 5,
                    pageNum: 1
                },
                total: 0,
                businessCompany: '', //业务所属公司
                businessCompanyOptions: [],
                regionOptions: [],
                searchList: [], //搜索列表
                historyList: [], //历史记录
                orderId: '', //订单id
				orderNo:'',//订单编号
                dateNow: '', //当前时间
				
				
            };
        },
        onLoad() {
            console.log(this.$store.getters);
            this.permissions = this.$store.getters.permissions

            this.initData()
            this.getBusinessCompanyOptions()
            this.getAreaList()
            this.dateNow = this.getNowTime()

            // 控制删除按钮权限出现
            if (this.permissions.includes('*:*:*') || this.permissions.includes('module:order:delete')) {
                this.disabledShow = false
            }
        },
        // 上划
        onReachBottom() {
            if (this.formData.pageSize * this.formData.pageNum < this.total) {
                this.formData.pageNum++
                let res = listOrder(this.formData).then(reponse => {
                    this.list.push(...reponse.rows)
                    console.log(this.list);
                })


            } else {
                console.log('已经加载完毕');
            }
        },
        // 下拉
         onPullDownRefresh() {
            this.list = []
            this.formData = {
                    orderType: '',
                    orderDate: '',
                    businessCompany: '',
                    projectName: '',
                    projectAreaName: '',
                    projectArea: '',
                    customerName: '',
                    orderNo: '',
                    pageSize: 5,
                    pageNum: 1
                },
            setTimeout(() => {
				this.initData()
                uni.stopPullDownRefresh()
            }, 1000)
        },

        methods: {
			// 重新提交
			resubmit(){
				uni.navigateTo({
				    url: '/pages/order/addOrder/addOrder?orderInfo='+JSON.stringify(this.itemData)
				})
			},
			
			// 撤回
			async recallFn(){
				console.log(this.orderId);
			  await  editapprovalRecode({
				   serialNum:this.orderNo,
				     typeOperation:"recall"  
			   })
			   var that=this
			   this.$refs.uToast.show({
				   type:'success',
				   message:'撤回成功',
				   complete(){
					   // 修改订单状态
					   
					   updateOrder({id:that.orderId,orderStatus:'13'}).then(res=>{
						   that.initData()
					   })
					   
				   }
			   })
			},
			
			
            // 获取业务所属公司
            getBusinessCompanyOptions() {
                getDicts('biz_business_company').then(response => {
                    this.businessCompanyOptions.push(response.data)
                    // console.log(this.businessCompanyOptions);
                })
            },
            getNowTime() {
                var date = new Date()
                // console.log(date);
                var month = date.getMonth() + 1;
                var time = date.getFullYear() + "-" + month + "-" + date.getDate();
                // console.log(time);
                return time;

            },
            // 点击详情
            detailsBtn(id) {
                uni.navigateTo({
                    url: "/pages/order/orderdetails/index?id=" + id
                })
            },
            // 获取地区域所属
            async getAreaList() {
                const res = await provinceNameList()
                console.log(res);
                this.regionOptions.push(res.rows)
                console.log(this.regionOptions);

            },
            // 新建按钮
            addBtn() {
                if (this.permissions.includes('*:*:*') || this.permissions.includes('module:order:add')) {
                    uni.navigateTo({
                        url: '/pages/order/addOrder/addOrder'
                    })
                } else {
                    this.$refs.uToast.show({
                        type: 'default',
                        message: '您没有权限新增租赁订单！'
                    })
                }
            },
            back() {
                uni.switchTab({
                    url: '/pages/index'
                })
            },
            async initData() {
                // this.formData.pageNum=1
                // this.formData.pageSize=5
                const res = await listOrder(this.formData)
                this.list = res.rows
                this.total = res.total
            },
            // getMoreList(){},
            // 弹出层
            async openBtn(value) {
                this.itemData=value
                this.orderId = value.id
				this.orderNo=value.orderNo
                this.openShow = true
            },
			
            close() {
                this.openShow = false
                console.log(this.openShow);
            },
            // 根据订单状态搜索
            async changeFn(e) {
                console.log(e);

                if (e.text == '市场部待审批') {
                    this.formData.orderType = ''
                    this.formData.orderStatus = e.value
                    const res = await listOrder(this.formData)
                    this.list = res.rows
                }
                if (e.text == '财务部待审批') {
                    this.formData.orderType = ''
                    this.formData.orderStatus = e.value
                    const res = await listOrder(this.formData)
                    this.list = res.rows
                }
                if (e.text == '已结算订单') {
                    this.formData.orderType = ''
                    this.formData.orderStatus = e.value
                    const res = await listOrder(this.formData)
                    this.list = res.rows
                }

                if (e.text == '全部订单' || e.text == '租赁订单' || e.text == '销售订单') {
                    this.formData.orderStatus = ''
                    const res = await listOrder(this.formData)
                    this.list = res.rows
                }
            },
            // 筛选弹框的确定按钮
            async searchClick() {
                const res = await listOrder(this.formData)
                this.list = res.rows
                this.isShow = false
                this.formData = {
                    orderType: '',
                    orderDate: '',
                    businessCompany: '',
                    projectName: '',
                    projectAreaName: '',
                    projectArea: '',
                    customerName: ''
                }
            },
            // 筛选
            searchBtn() {
                this.isShow = true
                // H5关闭遮罩层下面页面滑动
                // #ifdef H5
                document.body.style.overflow = 'hidden'
                // #endif
                console.log(this.openShow);
                console.log(this.isShow);
            },
            // 关闭
            closeBtn() {
                this.isShow = false
            },
            // 时间选择器
            pickBtn(e) {
                console.log(e);
                if (e.name == '订单发起日期') {
                    this.dateShow = true
                }
                if (e.name == '业务所属公司') {
                    this.businessCompanyShow = true
                }
                if (e.name == '项目地区域') {
                    this.regionShow = true
                }

            },

            // 确定选择时间
            dateConfirm(e) {
                // console.log(e.value);
                this.formData.orderDate = this.getTime(e.value);
                // console.log(this.formData.orderDate)
                this.dateShow = false
            },
            // 时间格式化
            getTime(val) {
                var date = new Date(val);
                var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
                var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
                var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
                //修改月份格式
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                //修改日期格式
                if (day >= 0 && day <= 9) {
                    day = "0" + day;
                }
                var currentFormatDate = `${year}-${month}-${day}`;
                return currentFormatDate
            },
            confirm(e) {
                // console.log(e);
                if (e.value[0].dictType == 'biz_business_company') {
                    this.formData.businessCompany = e.value[0].dictValue
                    this.businessCompany = e.value[0].dictLabel
                    this.businessCompanyShow = false
                }
            },
            // 项目地区域
            regionConfirm(e) {
                console.log(e);
                this.formData.projectAreaName = e.value[0].label
                this.formData.projectArea = e.value[0].value
                this.regionShow = false

            },
            // 列表数据删除
            async delBtn(e) {
                // console.log(e);
                // e.name就是传的订单id
                const res = await delOrder(e.name)
                this.$refs.uToast.show({
                    message: '删除成功！',
                })
                this.initData()
            },
            // 晒选页面重置
            reset() {
                this.formData = {
                    orderType: '',
                    orderDate: '',
                    businessCompany: '',
                    projectName: '',
                    projectAreaName: '',
                    projectArea: '',
                    customerName: ''
                }
            },
            // 放大镜搜索框
            magnifierBtn() {
                this.searchShow = true
            },
            // 搜索框
            async inputSearchBtn(val) {
                this.close1 = false
                if (!this.formData.orderNo) {
                    this.searchList = []
                    return false
                }
                const res = await listOrder({
                    orderNo: this.formData.orderNo
                })
                console.log(res);
                this.searchList = res.rows

                // 将搜索的数据放到历史记录表
                // 数组去重
                let idx = this.historyList.findIndex((item) => item === val);
                console.log(this.historyList);
                if (idx !== -1) {
                    this.historyList.splice(idx, 1);
                }
                this.historyList.unshift(this.formData.orderNo)
            },
            // 取消按钮
            customFn() {
                this.searchShow = false
                this.formData.orderNo = ''
                this.searchList = []
            },
            // 清空
            clearFn() {
                this.formData.orderNo = ''
                this.searchList = []
                this.close1 = true
            },
            // 删除全部历史记录
            delFn() {
                this.historyList = []
            },
            // 单个删除历史记录
            closeFn(item, index) {
                console.log(item, index);
                this.historyList.splice(index, 1)
                console.log(this.historyList);
            },
            // 点击搜索记录 再次搜索
            historyBtn(item, index) {
                console.log(item, index);
                this.formData.orderNo = item
                this.close1 = false
                this.historyList.splice(index, 1);
                this.inputSearchBtn()
            },
            // 跳转出库单
            async outBtn() {
                const res = await listHouse({
                    orderId: this.orderId
                })
                uni.navigateTo({
                    url: '/pages/out/outSon/outSon?id=' + res.rows[0].id
                })
            },
            // 跳转库申请
            async returnApply() {
                const res = await getBackWarehouseList({
                    orderId: this.orderId
                })
                uni.navigateTo({
                    url: '/pages/backapplication/backapplicationChildren/backapplicationChildren?returnApplyNo=' +
                        res.rows[0].returnApplyNo
                })
            },
            async statementFn() {
                let res = await getStatementListApi({
                    orderId: this.orderId
                })
                uni.navigateTo({
                    url: "/pages/accountStatement/StatementInfo/StatementInfo?id=" + res.rows[0].id
                })
            },
            async finnalStatement() {
                let res = await getStatementListApi({
                    orderId: this.orderId
                })
                console.log(res);
                uni.navigateTo({
                    url: "/pages/finnalStatement/details/index?id=" + res.rows[0].id
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    //    ::v-deep .uni-navbar .uni-navbar__header .uni-navbar-btn-text {
    // 		font-size: 40px !important;
    // }
    * {
        margin: 0;
        padding: 0;
    }

    .BGC {
        width: 100%;
        min-height: 400px;
        background-image: url('@/static/images/bgc.png');
        background-size: 100% 200px;
        background-repeat: no-repeat;
        margin: 200px 0;
    }

    .popupShow {
        overflow: hidden;
        position: fixed;
    }

    // 下拉选择框
    .demo-uni-row {
        margin-bottom: 10px;
        // position: fixed;
        /* QQ、字节小程序文档写有 :host，但实测不生效 */
        /* 百度小程序没有 :host，需要设置block */
        /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
        display: block;
        /* #endif */

        .title {
            height: 48px;
            line-height: 48px;
            background-color: #ffffff;
            text-align: center;
            font-size: 16px;
        }
    }

    .box {
        background-color: #fff;
    }

    .list-header {
        display: flex;
        justify-content: space-between;

        span {
            color: #ff7c35;
        }

    }

    .box {
        border: solid 1px #c3c3c3;
        margin: 10px;
        border-radius: 6px;

        .list-top {
            display: flex;
            justify-content: space-between;
            border-bottom: solid 1px #c3c3c3;
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
        }

        .list-body {
            font-size: 12px;
            margin: 10px;

            view {
                padding: 1px 0;
            }
        }

        .list-bottom {
            display: flex;
            justify-content: space-around;
            border-top: solid 1px #c3c3c3;
            font-size: 13px;
            height: 35px;
            line-height: 35px;
            color: #748ec1;
            text-align: center;

            view {
                width: 50%;
            }
        }
    }

    // 弹出层
    .openBox {
        position: relative;
        min-width: 200px;
        margin-top: 30px;
        padding-left: 5px;
        height: 100%;

        .btn {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        // 操作按钮弹出层
        .grid-item-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;

            .text {
                font-size: 12px;
                margin-top: 3px;
            }

            .iconBox {
                width: 35px;
                height: 35px;
                display: block;
                border-radius: 5px;
                background-color: #fff9eb;
                line-height: 35px;
            }
        }
    }

    // 右边弹框
    .rightBox {
        min-width: 300px;
        height: 100%;

        .itemBox {
            height: 85px;
            padding: 10px;
            border-bottom: solid 1px #c3c3c3;

            .title {
                padding: 5px 0;
            }
        }
    }

    // 搜索框历史记录
    .history {
        width: 100%;
        min-height: 50px;
        background-color: #fff;
        padding: 0px 10px 10px 5px;

        span {
            display: inline-block;
            min-width: 35px;
            height: 22px;
            line-height: 22px;
            // background-color: red;
            text-align: center;
            margin: 5px;
        }
    }
</style>
